<template>
    <!--如果没有添加key  就是在当前选中的标签原地更新 不会跟随标签删除而删除-->
    <div class="conent" v-for="(item,index) in brand" :key="item.id">
        <div class="code">
            <input type="checkbox">
            <text class="title">{{ item.name }}</text>
            <text class="title">{{ item.price }}</text>
            <button class="btn" @click="remove(index)">删除</button>
        </div>

    </div>
    <div>
        <h2>组合Api的生命周期钩子</h2>
        {{ count }}
        <p id="count" @click="count++">点击加加--{{ count }}</p>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUpdated, ref } from 'vue'
const count = ref(0)
const brand = ref([
    { id: 101, name: '奔驰', price: '18.8' },
    { id: 102, name: '小米su7', price: '21.8' },
    { id: 103, name: '奥迪', price: '13.8' },
    { id: 104, name: '宝马', price: '16.8' },
    { id: 105, name: 'BYD', price: '7.8' },
])
const remove = (index: number)=>{ 
    brand.value.splice(index,1)
}
onMounted(() => { 
    console.log("渲染页面，在浏览器加载的时候立即渲染页面，只执行一次");
    console.log(count.value);
    
})

onUpdated(() => { 
    console.log("更新操作钩子",document.getElementById('count')?.textContent);
    
})
</script>

<style scoped>
.conent{
    border: 1px solid #ccc;
    padding-left: 10px;
    .code{
        margin-top: 10px;
       
    }
}
 .title {
     padding-left: 20px;
     font-size: 16px;
 }
 .btn{
    margin-left: 20px;
 }
</style>